<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2022-03-07 14:52:30
 * @LastEditors: younghxp
 * @LastEditTime: 2022-03-09 09:26:03
-->
<template>
  <div class="content">
    <div class="top">
      <div class="title">各区县制度落实情况详情</div>
      <el-select
        v-model="ruleType"
        @change="getRuleDetail"
        placeholder="请选择"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <div class="tableBox">
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#f5f7fb', color: '#606266' }"
        style="border: 1px solid #dfe6ec; border-bottom: none"
        ref="table"
      >
        <el-table-column
          type="index"
          label="排名"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="areaName"
          label="区域"
          align="center"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column label="百分比" align="center" width="180">
          <template slot-scope="scope"
            ><span>{{
              scope.row[ruleType] === 0
                ? 0
                : scope.row[ruleType]
                ? scope.row[ruleType] + '%'
                : '--'
            }}</span></template
          >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'platformAreaRule',
  data() {
    return {
      ruleType: 'realNameCoverageScale',
      key: 'realNameCoverage',
      options: [
        {
          label: '实名制覆盖率',
          value: 'realNameCoverageScale',
          key: 'realNameCoverage',
        },
        {
          label: '实名制更新率',
          value: 'realNameUpdateScale',
          key: 'realNameUpdate',
        },
        {
          label: '工资专户开户率',
          value: 'accountOpenScale',
          key: 'accountOpen',
        },
        {
          label: '银行代发落实率',
          value: 'bankUndertakesScale',
          key: 'bankUndertakes',
        },
        {
          label: '工资保证金缴纳率',
          value: 'depositPayScale',
          key: 'depositPay',
        },
        {
          label: '维权公示牌覆盖率',
          value: 'activistPublicityCardScale',
          key: 'activistPublicityCard',
        },
      ],
      tableData: [],
    }
  },
  mounted() {
    this.getRuleDetail()
  },
  methods: {
    getRuleDetail() {
      const findOne = this.options.find((v) => v.value === this.ruleType) || {}
      return this.axios
        .post('api-s/cs/projectstats/base/findProjectSystemImplementDetail', {
          key: findOne.key,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.tableData = res.data.result
          } else {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  margin-top: 10px;
  background-color: #fff;
  .top {
    height: 40px;
    border-bottom: 1px solid #e3e7e9;
    padding: 0 16px;
    .title {
      display: inline-block;
      width: 180px;
      line-height: 40px;
      color: #333;
      font-size: 16px;
      font-weight: 700;
    }
    /deep/.el-select {
      float: right;
      .el-input__inner {
        height: 39px;
        border: none;
        font-size: 14px;
        color: #409eff;
        text-align: right;
        font-weight: 700;
        padding-right: 35px;
      }
      .el-input__suffix {
        height: 39px !important;
      }
    }
  }
  .tableBox {
    padding: 16px;
  }
}
</style>
>
